/**
 * Created by tanbingqin on 2018/12/25.
 */
import {messages} from "share/common";
import React from 'react';
import { connect } from 'react-redux';
import { Form, Select, Row, Col, message, Icon, Button, Divider} from 'antd';

class TravelFlight extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  componentDidMount(){}

  componentWillReceiveProps(nextProps) {}

  render() {
    const { flightList } = this.props;
    return (
      <div>
        {flightList.map((flight, index) => {
          return (
            <div key={flight.bookOID}>
              <Row type="flex" gutter={16} align="middle">
                <Col span={24}>
                  <div style={{border: 'solid 1px #cdcdcd', borderRadius: 5, padding: '10px 10px'}}>
                    <Row type="flex" align="middle">
                      <Col span={4}>
                        <div className='default-color-font'>{flight.startDate}</div>
                        <div style={{color: '#A8A8A8', fontSize: 10}}>{flight.airlineName}</div>
                        <div style={{fontWeight: 'bold'}}>{flight.flightNo}</div>
                      </Col>
                      <Col span={4}>
                        <div style={{fontSize: 18, fontWeight: 'bold'}}>{flight.departTime}</div>
                        <div style={{color: '#A8A8A8', fontSize: 10}}>{flight.orgAirportTower}</div>
                      </Col>
                      <Col span={3}><Icon type="swap-right" style={{width: '100%', fontSize: 40}}/></Col>
                      <Col span={7}>
                        <div>
                          <span style={{fontSize: 18, fontWeight: 'bold'}}>{flight.arriveTime}</span>
                          {flight.isOverDays && (
                            <span className='default-color-font' style={{fontSize: 10}}>+{flight.days}{messages('request.key540')/*天*/}</span>
                          )}
                        </div>
                        <div style={{color: '#A8A8A8', fontSize: 10}}>{flight.desAirportTower}</div>
                      </Col>
                      <Col span={6}>
                        <div style={{color: '#A8A8A8', fontSize: 10}}>{messages('request.key541')/*参考价格*/}</div>
                        <div>
                          <span style={{fontSize: 10, fontWeight: 'bold'}}>{flight.currency}</span>
                          <span style={{fontSize: 18, fontWeight: 'bold', color: '#FF9900'}}>{this.filterMoney(flight.amount)}</span>
                        </div>
                        <div style={{color: '#A8A8A8', fontSize: 10}}>{flight.cabin}&nbsp;{flight.discount}{messages('request.key326')/*折*/}</div>
                      </Col>
                    </Row>
                  </div>
                </Col>
              </Row>
              {index + 1 < flightList.length && (
                <Divider dashed style={{margin: '15px 0px'}} />
              )}
            </div>
          )
        })}
      </div>
    )
  }
}

function mapStateToProps() {
  return {}
}

TravelFlight.propTypes = {
  flightList: React.PropTypes.array, //航班列表
};

TravelFlight.defaultProps = {
  flightList: []
};

const WrappedTravelFlight = Form.create()(TravelFlight);

export default connect(mapStateToProps)(WrappedTravelFlight);
